<template>
  <div class="page-main layout-lr ">
    <div class="app-container" :style="{height:'100%', minHeight: '500px'}">
      <div class="flex-wrap" :style="{marginRight:isSearch ? '0' : '-24px' }">
        <div class="content-wrap">
          <el-scrollbar style="height:100%">
            <slot name="content-left"></slot>
            <div class="collapse-search" @click="isSearch = !isSearch"><i :class="isSearch ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i></div>
          </el-scrollbar>
        </div>
        
        <div class="form-search" v-show="isSearch">
          <slot name="content-right"></slot>
        </div>
      </div>
      <slot/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageLr',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data(){
      return{
          default_title: null,
          domHeight: 0,
          winHeight: document.body.clientHeight,
          isSearch: true,
      }
  },
  created(){
      // this.default_title = this.$route.meta.title;
      this.default_title = this.$route.name;
      this.domHeight = this.winHeight;
  },
  watch:{
    winHeight(newVal,oldVal){
      this.domHeight = newVal - 66 - 48*2;
    }
  },
  mounted(){
    window.onresize = () => {
      return ( () => {
        this.winHeight = document.documentElement.clientHeight;
      })()
    }
  }
}
</script>
